<template lang="pug">
.flex.items-start.mb-3
  .title.pt-1 {{props.comInfo.label}} 
  .flex-1
  
  .grid.grid-cols-2.gap-2.justify-end.grid-flow-col(v-if="Array.isArray(comInfo.extra)")
    ExtraPop(v-for="item in comInfo.extra" :key="item.title" :extra="item" @change="extraChange($event)")
 

.grid.grid-cols-2.gap-4.pl-4.mb-4
  .item-col-2(v-for="item in inputs" :key="item.name")
    view.label.text-prim.w-12.text-right {{item.label}}
    uni-number-box(background="#B59E6D"  v-model="form[item.name]" 
      :max="Number(item.max)" :min="Number(item.min)" :defaultValue="Number(item.value)")

</template>
<script setup>
import {getCurrentInstance} from 'vue'
import ExtraPop from './extraPop.vue'
const props =  defineProps({
  comInfo:Object,
})
const emit = defineEmits(["change"])
const inputs = ref([]);
const form = reactive({

});


watch(form,()=>{
  emit('change',form)
})
onMounted(()=>{
  const data ={};
  for(let item of props.comInfo.sub){
    data[item.name] = Math.min(item.max, Math.max(item.min, item.value||0));
  }
  Object.assign(form,data);
  inputs.value = props.comInfo.sub;
})
function extraChange(ev){
  console.log(ev);
  Object.assign(form,ev)
}
</script>
<style scoped lang="scss">
@import  "./style.scss";
</style>